<!DOCTYPE html>

<html lang="zh-CN">

<head>
  
  <meta name="baidu-site-verification" content="code-J1Qg17G6wT" />
  <title>web学习笔记7 - 数组 - 咔斯の小窝</title>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
  
  

    <!-- Site Verification -->
    <meta name="baidu-site-verification" content="code-7bF3wXCwO5" />

  <link rel="shortcut icon" href="https://s2.loli.net/2022/07/19/xKNvsPHqcyCL37d.png" type="image/png" />
  <meta name="description" content="数组 学习总结封面画师：唏嘘的星辰  p站ID：13312138">
<meta property="og:type" content="article">
<meta property="og:title" content="web学习笔记7 - 数组">
<meta property="og:url" content="https://blog.kassama.top/webNotes7.html">
<meta property="og:site_name" content="咔斯の小窝">
<meta property="og:description" content="数组 学习总结封面画师：唏嘘的星辰  p站ID：13312138">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-04-13T11:50:21.000Z">
<meta property="article:modified_time" content="2023-03-07T08:00:31.089Z">
<meta property="article:author" content="咔斯Sama">
<meta property="article:tag" content="HTML">
<meta property="article:tag" content="web">
<meta name="twitter:card" content="summary">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/highlight.js@9.15.8/styles/atom-one-dark.css,gh/theme-nexmoe/hexo-theme-nexmoe@latest/source/lib/mdui_043tiny/css/mdui.css,gh/theme-nexmoe/hexo-theme-nexmoe@latest/source/lib/iconfont/iconfont.css,gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css?v=233" crossorigin>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/css/justifiedGallery.min.css">
  
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2421060_cksn56jaae6.css">
  
  <link rel="stylesheet" href="/css/style.css?v=1695462045735">
<meta name="generator" content="Hexo 6.1.0"></head>

<body class="mdui-drawer-body-left">
  
  <div id="nexmoe-background">
    <div class="nexmoe-bg" style="background-image: url(https://cdn.jsdelivr.net/gh/kasisama/Blog_images/background/bk1.webp)"></div>
    <div class="nexmoe-small" style="background-image: url(https://s2.loli.net/2022/07/19/QDhWb3BqyXLcdF8.png)"></div>
    <div class="mdui-appbar mdui-shadow-0">
      <div class="mdui-toolbar">
        <a mdui-drawer="{target: '#drawer', swipe: true}" title="menu" class="mdui-btn mdui-btn-icon mdui-ripple"><i class="mdui-icon nexmoefont icon-menu"></i></a>
        <div class="mdui-toolbar-spacer"></div>
        <!--<a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>-->
        <a href="/" title="咔斯Sama" class="mdui-btn mdui-btn-icon"><img src="https://cdn.jsdelivr.net/gh/kasisama/Blog_images/background/kasi.webp" alt="咔斯Sama"></a>
       </div>
    </div>
  </div>
  <div id="nexmoe-header">
      <div class="nexmoe-drawer mdui-drawer" id="drawer">
    <div class="nexmoe-avatar mdui-ripple">
        <a href="/" title="咔斯Sama">
            <img src="https://cdn.jsdelivr.net/gh/kasisama/Blog_images/background/kasi.webp" alt="咔斯Sama" alt="咔斯Sama">
        </a>
    </div>
    <div class="nexmoe-count">
        <div id="ks-articlesBtn" class="nexmoe-count-item"><span>文章</span>32 <div class="item-radius"></div><div class="item-radius item-right"></div> </div>
        <div id="ks-tagsBtn" class="nexmoe-count-item"><span>标签</span>14<div class="item-radius"></div><div class="item-radius item-right"></div></div>
        <div id="ks-categoriesBtn" class="nexmoe-count-item"><span>分类</span>6<div class="item-radius"></div><div class="item-radius item-right"></div></div>
    </div>
    <div class="nexmoe-list mdui-list" mdui-collapse="{accordion: true}">
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/" title="回到首页">
            <i class="mdui-list-item-icon nexmoefont icon-meishi"></i>
            <div class="mdui-list-item-content">
                回到首页
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/archives.html" title="文章归档">
            <i class="mdui-list-item-icon nexmoefont icon-hanbao1"></i>
            <div class="mdui-list-item-content">
                文章归档
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/friend.html" title="我的朋友">
            <i class="mdui-list-item-icon nexmoefont icon-cola"></i>
            <div class="mdui-list-item-content">
                我的朋友
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/photos.html" title="咔斯相册">
            <i class="mdui-list-item-icon nexmoefont icon-tuchong"></i>
            <div class="mdui-list-item-content">
                咔斯相册
            </div>
        </a>
        
        <a class="nexmoe-list-item mdui-list-item mdui-ripple" href="/about.html" title="关于咔斯">
            <i class="mdui-list-item-icon nexmoefont icon-jiubei1"></i>
            <div class="mdui-list-item-content">
                关于咔斯
            </div>
        </a>
        
    </div>
    <aside id="nexmoe-sidebar">
  
  
<!-- 站内搜索 -->

<div class="nexmoe-widget-wrap">
    <div class="nexmoe-widget nexmoe-search" >
        <form id="search-form">
            <label><input type="text" id="local-search-input" name="q" results="0" placeholder="站内搜索" class="input form-control" autocomplete="off" autocorrect="off"/></label>
            <!-- 清空/重置搜索框 -->
            <i class="fa fa-times" onclick="resetSearch()"></i>
        </form>
    </div>
    <div id="local-search-result"></div> <!-- 搜索结果区 -->
    <!-- <p class='no-result'></p> 无匹配时显示，注意在 CSS 中设置默认隐藏 -->
</div>


  
  <div class="nexmoe-widget-wrap">
    <div class="nexmoe-widget nexmoe-social">
        <a class="mdui-ripple" href="http://wpa.qq.com/msgrd?v=3&uin=1347993953&site=qq&menu=yes" target="_blank" mdui-tooltip="{content: 'QQ'}" style="color: rgb(64, 196, 255);background-color: rgba(64, 196, 255, .1);">
            <i class="nexmoefont icon-QQ"></i>
        </a><a class="mdui-ripple" href="https://steamcommunity.com/id/kasiwuhui/" target="_blank" mdui-tooltip="{content: 'steam'}" style="color: rgb(14, 71, 161);background-color: rgba(14, 71, 161, .15);">
            <i class="nexmoefont icon-steam"></i>
        </a><a class="mdui-ripple" href="mailto:kasiwuhui@vip.qq.com" target="_blank" mdui-tooltip="{content: 'mail'}" style="color: rgb(249,8,8);background-color: rgba(249,8,8,.1);">
            <i class="nexmoefont icon-mail-fill"></i>
        </a><a class="mdui-ripple" href="https://space.bilibili.com/93548600" target="_blank" mdui-tooltip="{content: '哔哩哔哩'}" style="color: rgb(231, 106, 141);background-color: rgba(231, 106, 141, .15);">
            <i class="nexmoefont icon-bilibili"></i>
        </a><a class="mdui-ripple" href="https://github.com/kasisama/" target="_blank" mdui-tooltip="{content: 'GitHub'}" style="color: rgb(25, 23, 23);background-color: rgba(25, 23, 23, .15);">
            <i class="nexmoefont icon-github"></i>
        </a><a class="mdui-ripple" href="https://gitee.com/kassama" target="_blank" mdui-tooltip="{content: 'gitee'}" style="color: rgb(199, 29, 35);background-color: rgba(199, 29, 35, .15);">
            <i class="nexmoefont icon-mayun"></i>
        </a>
    </div>
</div>
  
  
  <div class="nexmoe-widget-wrap">
    <div id="randomtagcloud" class="nexmoe-widget tagcloud nexmoe-rainbow">
      <a href="/tags/CDN/" style="font-size: 10px;">CDN</a> <a href="/tags/HTML/" style="font-size: 20px;">HTML</a> <a href="/tags/Linux/" style="font-size: 12.5px;">Linux</a> <a href="/tags/NodeJs/" style="font-size: 12.5px;">NodeJs</a> <a href="/tags/QWQ/" style="font-size: 10px;">QWQ</a> <a href="/tags/Ubuntu/" style="font-size: 12.5px;">Ubuntu</a> <a href="/tags/Vue/" style="font-size: 15px;">Vue</a> <a href="/tags/web/" style="font-size: 17.5px;">web</a> <a href="/tags/wiki/" style="font-size: 12.5px;">wiki</a> <a href="/tags/%E5%8D%9A%E5%AE%A2/" style="font-size: 10px;">博客</a> <a href="/tags/%E5%92%94%E6%96%AF/" style="font-size: 10px;">咔斯</a> <a href="/tags/%E5%92%94%E6%96%AF%E5%A8%B1%E4%B9%90/" style="font-size: 10px;">咔斯娱乐</a> <a href="/tags/%E5%AE%A0%E7%89%A9%E5%85%BB%E6%88%90/" style="font-size: 12.5px;">宠物养成</a> <a href="/tags/%E6%9C%8D%E5%8A%A1%E6%9D%A1%E6%AC%BE/" style="font-size: 10px;">服务条款</a>
    </div>
    
  </div>

  
  
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">文章分类</h3>
    <div class="nexmoe-widget">

      <ul class="category-list">

        


        

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/web笔记/">web笔记</a>
          <span class="category-list-count">23</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/wiki/">wiki</a>
          <span class="category-list-count">2</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/公告/">公告</a>
          <span class="category-list-count">1</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/备忘/">备忘</a>
          <span class="category-list-count">1</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/日志/">日志</a>
          <span class="category-list-count">4</span>
        </li>

        

        <li class="category-list-item">
          <a class="category-list-link" href="/categories/遇坑记录/">遇坑记录</a>
          <span class="category-list-count">1</span>
        </li>

        
      </ul>

    </div>
  </div>


  
  
  <div class="nexmoe-widget-wrap">
    <h3 class="nexmoe-widget-title">文章归档</h3>
    <div class="nexmoe-widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/">2022</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/">2021</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/">2020</a><span class="archive-list-count">20</span></li></ul>
    </div>
  </div>


<style>
.nexmoe-widget .archive-list-count{
	position : absolute;
	right: 15px;
	top:9px;
	color: #DDD;
}
</style>

  
</aside>
    <div class="nexmoe-copyright">
        &copy; 2023 咔斯Sama
        Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
        & <a href="https://github.com/theme-nexmoe/hexo-theme-nexmoe" target="_blank">Nexmoe</a><br/>
        <a href="http://beian.miit.gov.cn" target="_blank"></a><br/>
        
        <div style="font-size: 12px">
            <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            本站总访问量  <a id="busuanzi_value_site_pv"></a> 次<br />
            本站访客数<a id="busuanzi_value_site_uv"></a>人次
        </div>
        
        
    </div>

</div><!-- .nexmoe-drawer -->

  </div>
  <div id="nexmoe-content">
    <div class="nexmoe-primary">
        <div class="nexmoe-post">
    
        <div class="nexmoe-post-cover" style="padding-bottom: 47.41666666666667%;">
            <img data-src="https://cdn.jsdelivr.net/gh/kasisama/Blog_images/Otherimgage/webLearn.webp" data-sizes="auto" alt="web学习笔记7 - 数组" class="lazyload">
            <h1>web学习笔记7 - 数组</h1>
        </div>
    

        <div class="nexmoe-post-meta nexmoe-rainbow" style="margin:10px 0!important;">
    <a><i class="nexmoefont icon-calendar-fill"></i>2020年04月13日</a>
    <a><i class="nexmoefont icon-areachart"></i>2.2k 字</a>
    <a><i class="nexmoefont icon-time-circle-fill"></i>大概 10 分钟</a>
</div>


        <article>
            <p>数组 学习总结<br>封面画师：唏嘘的星辰  p站ID：13312138</p>
<span id="more"></span>
<h2 id="基础概念"><a href="#基础概念" class="headerlink" title="基础概念"></a>基础概念</h2><p><code>js</code>：弱类型的编程语言，定义变量不清楚变量具体类型，赋值的时候才知道数据的类型，<br><code>数组</code>：用来存储数据元素的，可以存储的类型是任意的，访问数组元素通过索引值进行访问的，最大的索引值的和数组的长度相差1<br><code>var arr = [&quot;张三&quot;,10]</code>  js推荐使用此种方式进行定义数组，</p>
<h2 id="定义数组方式"><a href="#定义数组方式" class="headerlink" title="定义数组方式"></a>定义数组方式</h2><p>构造函数定义 参数是元素列表<br><code>var p2 = new Array(&quot;hello&quot;,2,3)</code></p>
<h2 id="定义指定长度的数组"><a href="#定义指定长度的数组" class="headerlink" title="定义指定长度的数组"></a>定义指定长度的数组</h2><p>参数是数字类型<br><code>(arrayLength?: number)</code> 参数列表<br><code>arrayLength</code> 参数名<br><code>?</code> 可传可不传<br><code>number </code>是数字类型</p>
<h2 id="数组对象定义"><a href="#数组对象定义" class="headerlink" title="数组对象定义"></a>数组对象定义</h2><h3 id="new-Array"><a href="#new-Array" class="headerlink" title="new Array"></a>new Array</h3><p><code>var p3 = new Array(10)</code></p>
<h3 id="new-Array参数是数组结构"><a href="#new-Array参数是数组结构" class="headerlink" title="new Array参数是数组结构"></a>new Array参数是数组结构</h3><p>相当于数组元素就是数组<br><code>var p4 = new Array([&quot;1&quot;,2,3])</code><br>二维数组调用方式<br><code>console.log(p4[0][1])</code> &#x2F;&#x2F; 2 </p>
<h2 id="访问数组元素"><a href="#访问数组元素" class="headerlink" title="访问数组元素"></a>访问数组元素</h2><p><code>var arr = [&quot;张三&quot;,18]</code><br><code>console.log(arr[0])</code> &#x2F;&#x2F;“张三”<br><code>console.log(arr[3])</code> &#x2F;&#x2F; undefined</p>
<h2 id="遍历数组"><a href="#遍历数组" class="headerlink" title="遍历数组"></a>遍历数组</h2><h3 id="遍历"><a href="#遍历" class="headerlink" title="遍历"></a>遍历</h3><pre><code class="highlight js"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>;i&lt;arr.<span class="property">length</span>;i++)&#123;
  <span class="variable language_">console</span>.<span class="title function_">log</span>(arr[i])
&#125;</code></pre>
<h3 id="倒序遍历"><a href="#倒序遍历" class="headerlink" title="倒序遍历"></a>倒序遍历</h3><pre><code class="highlight js"><span class="keyword">for</span>(<span class="keyword">var</span> i = arr.<span class="property">length</span>-<span class="number">1</span>;i&gt;=<span class="number">0</span>;i--)&#123;
  <span class="variable language_">console</span>.<span class="title function_">log</span>(arr[i],<span class="string">&quot;----------&quot;</span>)
&#125;</code></pre>
<h3 id="倒序遍历-1"><a href="#倒序遍历-1" class="headerlink" title="倒序遍历"></a>倒序遍历</h3><pre><code class="highlight js"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>;i&lt;arr.<span class="property">length</span>;i++)&#123;
  <span class="variable language_">console</span>.<span class="title function_">log</span>(arr[arr.<span class="property">length</span>-<span class="number">1</span>-i],<span class="string">&quot;++++++++++&quot;</span>)
&#125;</code></pre>
<h3 id="数组遍历的API"><a href="#数组遍历的API" class="headerlink" title="数组遍历的API"></a>数组遍历的API</h3><p><code>Array.forEach(callbackfn)</code><br>参数名<code>callbackfn</code>：回调函数，必须是一个函数<br>回调函数的参数就是分别是<br><code>元素</code>，<code>索引值</code>，<code>数组本身</code></p>
<pre><code class="highlight js">arr.<span class="title function_">forEach</span>(<span class="keyword">function</span>(<span class="params">v,i,a</span>)&#123;
  <span class="variable language_">console</span>.<span class="title function_">log</span>(v,<span class="string">&quot;元素&quot;</span>)
  <span class="variable language_">console</span>.<span class="title function_">log</span>(i,<span class="string">&quot;索引值&quot;</span>)
  <span class="variable language_">console</span>.<span class="title function_">log</span>(a,<span class="string">&quot;数组本身&quot;</span>)
&#125;)</code></pre>

<h2 id="数组的增删改查操作"><a href="#数组的增删改查操作" class="headerlink" title="数组的增删改查操作"></a>数组的增删改查操作</h2><p>有些操作会影响数组内容本身：数组内方法<br>有些操作不会影响数组内容本身:数组外方法</p>
<p><code>var numArray = [1,2,3,4,5,6]</code></p>
<h3 id="添加的操作"><a href="#添加的操作" class="headerlink" title="添加的操作"></a>添加的操作</h3><p><code>numArray.push(&quot;hello&quot;)</code>          向数组最后一个添加元素<br><code>numArray.unshift(&quot;hanmeimei&quot;)</code>   向数组最前面一个添加元素</p>
<h3 id="通过索引值进行添加"><a href="#通过索引值进行添加" class="headerlink" title="通过索引值进行添加"></a>通过索引值进行添加</h3><p><code>numArray[8]=&quot;lilei&quot;</code></p>
<h3 id="删除"><a href="#删除" class="headerlink" title="删除"></a>删除</h3><p><code>numArray.pop()</code>    删除最后一位的 和push一对<br><code>numArray.shift()</code>  删除最前一位的 和unshift一对</p>
<h3 id="修改"><a href="#修改" class="headerlink" title="修改"></a>修改</h3><p><code>numArray[0] = &quot;10&quot; </code></p>
<h3 id="查询"><a href="#查询" class="headerlink" title="查询"></a>查询</h3><p>通过索引值访问， 遍历可以访问所有的元素<br><code>console.log(numArray[index])</code><br><code>numArray.forEach(v,i,a)&#123;&#125;</code></p>
<h3 id="获取元素索引值"><a href="#获取元素索引值" class="headerlink" title="获取元素索引值"></a>获取元素索引值</h3><ol>
<li><p>如果元素存在 获取的是元素的索引值，如果元素不存在获取的是-1<br><code>console.log(numArray.indexOf(&quot;lilei&quot;))</code></p>
</li>
<li><p>findIndex()<br>参数是一个函数，函数的参数：元素，索引，数组本身</p>
<pre><code class="highlight js"><span class="keyword">var</span> i1 =  numArray.<span class="title function_">findIndex</span>(<span class="keyword">function</span>(<span class="params">v,i,a</span>)&#123;
  <span class="comment">// v == &quot;hello&quot;   比较，把v和&quot;hello&quot;相等的元素索引值获取</span>
  <span class="keyword">return</span> v == <span class="string">&quot;hello&quot;</span>
&#125;)      
<span class="variable language_">console</span>.<span class="title function_">log</span>(i1)   <span class="comment">//查找到返回坐标，未查找到返回-1</span></code></pre></li>
</ol>
<h2 id="其他API"><a href="#其他API" class="headerlink" title="其他API"></a>其他API</h2><h3 id="字符串"><a href="#字符串" class="headerlink" title="字符串"></a>字符串</h3><p>字符串可以理解成一个特殊数组,能够用一些数组的方法</p>
<pre><code class="highlight js"><span class="keyword">var</span> str = <span class="string">&quot;hello&quot;</span>
<span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="property">length</span>) <span class="comment">// 获取字符串长度 5</span>
<span class="variable language_">console</span>.<span class="title function_">log</span>(str[<span class="number">2</span>])  <span class="comment">//获取单个字符 l</span>
<span class="variable language_">console</span>.<span class="title function_">log</span>(str.<span class="title function_">indexOf</span>(<span class="string">&quot;o&quot;</span>)) <span class="comment">//某个字符索引</span></code></pre>

<h3 id="Array-from-1"><a href="#Array-from-1" class="headerlink" title="Array.from() - 1"></a>Array.from() - 1</h3><p>把数据转成数组结构, 参数字符串</p>
<pre><code class="highlight js"><span class="keyword">var</span> arr =  <span class="title class_">Array</span>.<span class="title function_">from</span>(str)
<span class="variable language_">console</span>.<span class="title function_">log</span>(arr)</code></pre>

<h3 id="Array-from-2"><a href="#Array-from-2" class="headerlink" title="Array.from() - 2"></a>Array.from() - 2</h3><p>参数1 也可以数组<br>参数2 是回调函数,可以对参数1数组元素进行操作</p>
<p>总体方法用来返回值变化数组结构</p>
<pre><code class="highlight js"><span class="keyword">var</span> arr2 = <span class="title class_">Array</span>.<span class="title function_">from</span>([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>],<span class="keyword">function</span>(<span class="params">v</span>)&#123;
  <span class="keyword">return</span> v *<span class="number">3</span> <span class="comment">// 对数组元素都乘以3返回新数组</span>
&#125;)
<span class="variable language_">console</span>.<span class="title function_">log</span>(arr2)</code></pre>

<h3 id="concat"><a href="#concat" class="headerlink" title="concat()"></a>concat()</h3><p>数组进行合并</p>
<pre><code class="highlight js"><span class="keyword">var</span> arr3 = [<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>]
<span class="keyword">var</span> arr4 = [<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>]
<span class="keyword">var</span> arr5 = arr4.<span class="title function_">concat</span>(arr3)</code></pre>

<h3 id="every"><a href="#every" class="headerlink" title="every()"></a>every()</h3><p>参数是回调函数<br>回调函数每个参数分别为<code>元素</code> <code>索引</code> <code>数组</code></p>
<pre><code class="highlight js"><span class="comment">// 数组每一个元素都满足这个条件时候,整体结果就为true</span>
<span class="comment">// return 后面添加一个条件</span>
<span class="keyword">var</span> arr6 = [<span class="number">7</span>,<span class="number">4</span>,<span class="number">4</span>,<span class="number">6</span>,<span class="number">8</span>,<span class="number">8</span>]
<span class="keyword">var</span> t1 =  arr6.<span class="title function_">every</span>(<span class="keyword">function</span>(<span class="params">v,i,a</span>)&#123;
  <span class="keyword">return</span> v % <span class="number">2</span>==<span class="number">0</span>
&#125;)
<span class="variable language_">console</span>.<span class="title function_">log</span>(t1)</code></pre>

<h3 id="some"><a href="#some" class="headerlink" title="some()"></a>some()</h3><p>只要数组当中有一个满足条件的,结果为true</p>
<pre><code class="highlight js"><span class="keyword">var</span> t2 = arr6.<span class="title function_">some</span>(<span class="function">(<span class="params">v,i,a</span>)=&gt;</span>&#123;
  <span class="keyword">return</span> v%<span class="number">2</span>==<span class="number">0</span>
&#125;)
<span class="variable language_">console</span>.<span class="title function_">log</span>(t2)</code></pre>

<h3 id="lastIndexOf"><a href="#lastIndexOf" class="headerlink" title="lastIndexOf()"></a>lastIndexOf()</h3><p>返回最后一个元素的索引值</p>
<pre><code class="highlight js"><span class="keyword">var</span> lastIndex = arr.<span class="title function_">lastIndexOf</span>(<span class="number">3</span>) 
<span class="variable language_">console</span>.<span class="title function_">log</span>(lastIndex)</code></pre>

<h3 id="filter-过滤函数"><a href="#filter-过滤函数" class="headerlink" title="filter() 过滤函数"></a>filter() 过滤函数</h3><p>函数里面写过滤条件,把满足过滤条件的元素放进一个新数组里面</p>
<pre><code class="highlight js"><span class="keyword">var</span> a1 = arr.<span class="title function_">filter</span>(<span class="keyword">function</span>(<span class="params">v,i,a</span>)&#123;
  <span class="keyword">return</span> v % <span class="number">2</span> != <span class="number">0</span>
&#125;)
<span class="variable language_">console</span>.<span class="title function_">log</span>(a1)</code></pre>

<h3 id="map-映射函数"><a href="#map-映射函数" class="headerlink" title="map() 映射函数"></a>map() 映射函数</h3><p>把元素按照映射条件进行放入新数组里面</p>
<pre><code class="highlight js"><span class="keyword">var</span> a2 = arr.<span class="title function_">map</span>(<span class="keyword">function</span>(<span class="params">v,i,a</span>)&#123;
  <span class="keyword">return</span> v*<span class="number">3</span>
&#125;)
<span class="variable language_">console</span>.<span class="title function_">log</span>(a2)</code></pre>

<h3 id="join"><a href="#join" class="headerlink" title="join()"></a>join()</h3><p>把数组转成字符串</p>
<pre><code class="highlight js"><span class="keyword">var</span> s1 = arr.<span class="title function_">join</span>(<span class="string">&quot;,&quot;</span>)
<span class="variable language_">console</span>.<span class="title function_">log</span>(s1)</code></pre>

<h3 id="reverse"><a href="#reverse" class="headerlink" title="reverse()"></a>reverse()</h3><p>把数组的元素倒过来放进数组</p>
<pre><code class="highlight js"><span class="keyword">var</span> s2 = arr.<span class="title function_">reverse</span>()
<span class="variable language_">console</span>.<span class="title function_">log</span>(s2)</code></pre>

<h3 id="splice-删除数组"><a href="#splice-删除数组" class="headerlink" title="splice() 删除数组"></a>splice() 删除数组</h3><pre><code class="highlight js"><span class="comment">//  参数1 要操作元素的索引值</span>
<span class="comment">//  参数2 0添加的意思，不为0删除的个数</span>
<span class="comment">//  参数3 添加的时候，为添加的元素</span>
<span class="keyword">var</span> arr1 =[<span class="string">&quot;zs&quot;</span>,<span class="string">&quot;ls&quot;</span>,<span class="string">&quot;wc&quot;</span>,<span class="string">&#x27;mh&#x27;</span>]
<span class="comment">// arr1.splice(0,2) //删除</span>
arr1.<span class="title function_">splice</span>(<span class="number">2</span>,<span class="number">0</span>,<span class="string">&quot;wangwu&quot;</span>) <span class="comment">//在索引值为2地方添加了wangwu</span>
<span class="variable language_">console</span>.<span class="title function_">log</span>(arr1)</code></pre>

<h3 id="slice-截取子数组"><a href="#slice-截取子数组" class="headerlink" title="slice() 截取子数组"></a>slice() 截取子数组</h3><pre><code class="highlight js"><span class="comment">// &quot;111dds.jpg&quot;</span>
<span class="keyword">var</span> arr2 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>]
<span class="comment">// 截取子数组，从索引值开始截取，截取到最后</span>
<span class="comment">// 参数有俩个时候 从第一个开始截取（包头），到第二个结束</span>
<span class="variable language_">console</span>.<span class="title function_">log</span>(arr2.<span class="title function_">slice</span>(<span class="number">2</span>,<span class="number">3</span>))
<span class="variable language_">console</span>.<span class="title function_">log</span>(arr2.<span class="title function_">slice</span>(arr2.<span class="property">length</span>-<span class="number">3</span>))</code></pre>

<h2 id="其他案例"><a href="#其他案例" class="headerlink" title="其他案例"></a>其他案例</h2><h3 id="数组去重"><a href="#数组去重" class="headerlink" title="数组去重"></a>数组去重</h3><pre><code class="highlight js"><span class="keyword">var</span> arr1 = [<span class="number">1</span>,<span class="number">1</span>,<span class="number">1</span>,<span class="literal">true</span>,<span class="literal">true</span>,<span class="literal">true</span>,<span class="literal">false</span>,<span class="string">&quot;hello&quot;</span>,<span class="string">&#x27;hello&#x27;</span>]
<span class="comment">// 不添加新数组的前提  </span>
<span class="comment">// 拿数组每一个元素和他们后面元素进行对比 如果相等了 把后面元素删除，删除之后下标减一</span>
<span class="comment">/*</span>
<span class="comment">function quChong1(arr)&#123;</span>
<span class="comment">    for(var i = 0;i&lt;arr.length;i++)&#123;</span>
<span class="comment">        for(var j = i+1;j&lt;arr.length;j++ )&#123;</span>
<span class="comment">          if(arr[i]==arr[j])&#123;</span>
<span class="comment">            arr.splice(j,1) </span>
<span class="comment">            j--</span>
<span class="comment">          &#125;</span>
<span class="comment">        &#125;</span>
<span class="comment">    &#125;</span>
<span class="comment">    return arr</span>
<span class="comment">&#125;</span>
<span class="comment">console.log(quChong1(arr1))</span>
<span class="comment">*/</span>
<span class="comment">// 定义一个新数组，遍历原先数组，判断新数组有没有原先数组的元素，如果有，就不添加，如果没有，添加新数组里面</span>
<span class="keyword">function</span> <span class="title function_">quChong2</span>(<span class="params">arr</span>)&#123;
    <span class="keyword">var</span> newArray = []
    <span class="comment">// find() 遍历函数， 找到满足遍历条件的元素的值,如果有，result就是这个值，如果没有，result就是undefined</span>
    <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>;i&lt;arr.<span class="property">length</span>;i++)&#123;
        <span class="keyword">var</span> result =  newArray.<span class="title function_">find</span>(<span class="keyword">function</span>(<span class="params">v</span>)&#123;
        <span class="keyword">return</span> v == arr[i]
      &#125;)
      <span class="keyword">if</span>(result==<span class="literal">undefined</span>)&#123;
          newArray.<span class="title function_">push</span>(arr[i])
      &#125;   
    &#125;
    <span class="keyword">return</span> newArray
&#125;
<span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">quChong2</span>(arr1))</code></pre>

<h3 id="简单的注册登录数组"><a href="#简单的注册登录数组" class="headerlink" title="简单的注册登录数组"></a>简单的注册登录数组</h3><pre><code class="highlight js">d
<span class="comment">// 注册账号数组</span>
<span class="keyword">var</span> registerArray = [<span class="string">&quot;sj123456&quot;</span>,<span class="string">&quot;gh123456&quot;</span>,<span class="string">&quot;xzy123456&quot;</span>]
<span class="keyword">var</span> use = <span class="string">&quot;xzy123456&quot;</span>
<span class="keyword">var</span> t3 = registerArray.<span class="title function_">some</span>(<span class="keyword">function</span>(<span class="params">v,i,a</span>)&#123;
  <span class="keyword">return</span> v == use
&#125;)
<span class="keyword">if</span>(t3)&#123;
  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;该账号已被注册&quot;</span>)
&#125;<span class="keyword">else</span>&#123;
  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;恭喜注册成功了&quot;</span>)
&#125;

<span class="comment">// 账号密码</span>
<span class="comment">// 判断登录成功与否</span>
<span class="keyword">var</span> userArray = [&#123;<span class="attr">user</span>:<span class="string">&quot;13653858031&quot;</span>,<span class="attr">psw</span>:<span class="string">&quot;123456&quot;</span>&#125;,&#123;<span class="attr">user</span>:<span class="string">&quot;10086&quot;</span>,<span class="attr">psw</span>:<span class="string">&quot;123456&quot;</span>&#125;,&#123;<span class="attr">user</span>:<span class="string">&quot;10000&quot;</span>,<span class="attr">psw</span>:<span class="string">&quot;123456&quot;</span>&#125;,&#123;<span class="attr">user</span>:<span class="string">&quot;10010&quot;</span>,<span class="attr">psw</span>:<span class="string">&quot;123456&quot;</span>&#125;]
<span class="keyword">var</span> user = <span class="string">&quot;10000&quot;</span>
<span class="keyword">var</span> psw = <span class="string">&quot;123456&quot;</span>
<span class="keyword">var</span> t4 =  userArray.<span class="title function_">some</span>(<span class="keyword">function</span>(<span class="params">v,i,a</span>)&#123;
  <span class="comment">// v对象</span>
  <span class="keyword">return</span> v.<span class="property">user</span>==user&amp;&amp;v.<span class="property">psw</span> == psw
&#125;)
<span class="keyword">if</span>(t4)&#123;
  <span class="title function_">alert</span>(<span class="string">&quot;登录成功&quot;</span>)
&#125;<span class="keyword">else</span>&#123;
  <span class="title function_">alert</span>(<span class="string">&quot;账号或者密码错误&quot;</span>)
&#125;</code></pre>d

<h3 id="冒泡排序"><a href="#冒泡排序" class="headerlink" title="冒泡排序"></a>冒泡排序</h3><p>&#x2F;&#x2F; 实现俩个数字交换位置<br>&#x2F;&#x2F; 定义中间变量<br>var a &#x3D; 10<br>var b &#x3D; 20</p>
<p>&#x2F;*<br>  var temp &#x3D; a  &#x2F;&#x2F; 把a的值赋值给temp<br>      a &#x3D; b &#x2F;&#x2F;a &#x3D; 20<br>    b &#x3D; temp &#x2F;&#x2F; 10</p>
<p>console.log(a,b) &#x2F;&#x2F; 20 10<br>*&#x2F;</p>
<p>&#x2F;&#x2F;不使用中间变量 实现数字交换<br>&#x2F;&#x2F;  b &#x3D; a - b<br>&#x2F;&#x2F;  a &#x3D; a - b  &#x2F;&#x2F; a &#x3D;  a-(a-b)&#x3D;b<br>&#x2F;&#x2F;  b &#x3D; a + b   &#x2F;&#x2F; a-b+b &#x3D;a<br>&#x2F;&#x2F;  console.log(a,b)</p>
<p>&#x2F;&#x2F; 冒泡：把数组元素从小到大进行排序，<br>var arr &#x3D; [ 1,3,9,20,11,2,5]</p>
<p>&#x2F;&#x2F; 外循环是经过多少次循环，每次循环找出一个最值<br>&#x2F;&#x2F; 内循环是比较的次数 ,如果前面数比后面大，交换位置<br>&#x2F;&#x2F; 未优化之前的写法</p>
<p>&#x2F;*<br>for(var i &#x3D; 0;i&lt;arr.length;i++){<br>    for(var j &#x3D; 0;j&lt;arr.length;j++){<br>        if(arr[j]&gt;arr[j+1]){<br>            var temp &#x3D; arr[j] &#x2F;&#x2F; 把大值赋值给temp<br>            arr[j] &#x3D; arr[j+1] &#x2F;&#x2F;把小值提到前面元素上<br>    }<br>}<br>console.log(arr)<br>*&#x2F;</p>
<p>&#x2F;&#x2F; 外循环是经过多少次循环，每次循环找出一个最值  当i&#x3D;0 找一个最值 ; 当i&#x3D;1 找一个最值<br>&#x2F;&#x2F;  7个数 其实经过6次找出6个最值</p>
<p>&#x2F;&#x2F; 内循环 第一轮已经找到一个最值，以后比较没有必要再和最值进行相比，<br>for(var i &#x3D; 0;i&lt;arr.length-1;i++){<br>    for(var j &#x3D; 0;j&lt;arr.length-1-i;j++){<br>        if(arr[j]&gt;arr[j+1]){<br>            var temp &#x3D; arr[j] &#x2F;&#x2F; 把大值赋值给temp<br>            arr[j] &#x3D; arr[j+1] &#x2F;&#x2F;把小值提到前面元素上<br>            arr[j+1] &#x3D; temp &#x2F;&#x2F; 把大值放大后面元素<br>        }<br>    }<br>}<br>console.log(arr)                 arr[j+1] &#x3D; temp &#x2F;&#x2F; 把大值放大后面元素<br>        }</p>

        </article>

        
            
  <div class="nexmoe-post-copyright">
    <strong>本文作者：</strong>咔斯Sama<br>
    
    <strong>本文链接：</strong><a href="https://blog.kassama.top/webNotes7.html" title="https:&#x2F;&#x2F;blog.kassama.top&#x2F;webNotes7.html" target="_blank" rel="noopener">https:&#x2F;&#x2F;blog.kassama.top&#x2F;webNotes7.html</a><br>

    
      <strong>版权声明：</strong>本文采用 <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/cn/deed.zh" target="_blank">CC BY-NC-SA 3.0 CN</a> 协议进行许可
    
  </div>


        

        <div class="nexmoe-post-meta nexmoe-rainbow">
    
        <a class="nexmoefont icon-appstore-fill -link" href="/categories/web%E7%AC%94%E8%AE%B0/">web笔记</a>
    
    
        <a class="nexmoefont icon-tag-fill -none-link" href="/tags/HTML/" rel="tag">HTML</a> <a class="nexmoefont icon-tag-fill -none-link" href="/tags/web/" rel="tag">web</a>
    
</div>

    <div class="nexmoe-post-footer">
        <section class="nexmoe-comment">
    <!-- <div class="valine ks-valine-box"></div> -->
<script src='https://lib.baomitu.com/valine/1.5.1/Valine.min.js'></script>
<script>
    // 使用方法 https://valine.js.org/quickstart.html
    new Valine({
        el: '.valine',
        appId: '6Om9oV6sycmCPkRcrF9VR7Vd-gzGzoHsz',
        appKey: 'cas3l5T4L8EkjrOFGsfzD8vM',
        enableQQ: true,
        placeholder: '阁下要说点什么嘛！',
        requiredFields:['nick','mail'],

        emojiCDN: '//cdn.bilicdn.tk/gh/kasisama/ValineCDN@master/',
        // 表情title和图片映射
        emojiMaps: {
            "bilibilitv2": "bilibilitv/[tv_doge].png",
            "bilibilitv3": "bilibilitv/[tv_亲亲].png",
            "bilibilitv4": "bilibilitv/[tv_偷笑].png",
            "bilibilitv5": "bilibilitv/[tv_再见].png",
            "bilibilitv6": "bilibilitv/[tv_冷漠].png",
            "bilibilitv7": "bilibilitv/[tv_发怒].png",
            "bilibilitv8": "bilibilitv/[tv_发财].png",
            "bilibilitv9": "bilibilitv/[tv_可爱].png",
            "bilibilitv10": "bilibilitv/[tv_吐血].png",
            "bilibilitv11": "bilibilitv/[tv_呆].png",
            "bilibilitv12": "bilibilitv/[tv_呕吐].png",
            "bilibilitv13": "bilibilitv/[tv_困].png",
            "bilibilitv14": "bilibilitv/[tv_坏笑].png",
            "bilibilitv15": "bilibilitv/[tv_大佬].png",
            "bilibilitv16": "bilibilitv/[tv_大哭].png",
            "bilibilitv17": "bilibilitv/[tv_委屈].png",
            "bilibilitv18": "bilibilitv/[tv_害羞].png",
            "bilibilitv19": "bilibilitv/[tv_尴尬].png",
            "bilibilitv20": "bilibilitv/[tv_微笑].png",
            "bilibilitv21": "bilibilitv/[tv_思考].png",
            "bilibilitv22": "bilibilitv/[tv_惊吓].png",
            "bilibilitv23": "bilibilitv/[tv_打脸].png",
            "bilibilitv24": "bilibilitv/[tv_抓狂].png",
            "bilibilitv25": "bilibilitv/[tv_抠鼻].png",
            "bilibilitv26": "bilibilitv/[tv_斜眼笑].png",
            "bilibilitv27": "bilibilitv/[tv_无奈].png",
            "bilibilitv28": "bilibilitv/[tv_晕].png",
            "bilibilitv29": "bilibilitv/[tv_流汗].png",
            "bilibilitv30": "bilibilitv/[tv_流泪].png",
            "bilibilitv31": "bilibilitv/[tv_流鼻血].png",
            "bilibilitv32": "bilibilitv/[tv_点赞].png",
            "bilibilitv33": "bilibilitv/[tv_生气].png",
            "bilibilitv34": "bilibilitv/[tv_生病].png",
            "bilibilitv35": "bilibilitv/[tv_疑问].png",
            "bilibilitv36": "bilibilitv/[tv_白眼].png",
            "bilibilitv37": "bilibilitv/[tv_皱眉].png",
            "bilibilitv38": "bilibilitv/[tv_目瞪口呆].png",
            "bilibilitv39": "bilibilitv/[tv_睡着].png",
            "bilibilitv40": "bilibilitv/[tv_笑哭].png",
            "bilibilitv41": "bilibilitv/[tv_腼腆].png",
            "bilibilitv42": "bilibilitv/[tv_色].png",
            "bilibilitv43": "bilibilitv/[tv_调侃].png",
            "bilibilitv44": "bilibilitv/[tv_调皮].png",
            "bilibilitv45": "bilibilitv/[tv_鄙视].png",
            "bilibilitv46": "bilibilitv/[tv_闭嘴].png",
            "bilibilitv47": "bilibilitv/[tv_难过].png",
            "bilibilitv48": "bilibilitv/[tv_馋].png",
            "bilibilitv49": "bilibilitv/[tv_鬼脸].png",
            "bilibilitv50": "bilibilitv/[tv_黑人问号].png",
            "bilibilitv51": "bilibilitv/[tv_鼓掌].png",
            "Heybox1": "Heybox/expression_cube.png",
            "Heybox2": "Heybox/expression_cube_bingbujiandan.png",
            "Heybox3": "Heybox/expression_cube_bizui.png",
            "Heybox4": "Heybox/expression_cube_cangsang.png",
            "Heybox5": "Heybox/expression_cube_dalian.png",
            "Heybox6": "Heybox/expression_cube_doge.png",
            "Heybox7": "Heybox/expression_cube_gandong.png",
            "Heybox8": "Heybox/expression_cube_guai.png",
            "Heybox9": "Heybox/expression_cube_gugu.png",
            "Heybox10": "Heybox/expression_cube_han.png",
            "Heybox11": "Heybox/expression_cube_hbi.png",
            "Heybox12": "Heybox/expression_cube_heirenwenhao.png",
            "Heybox13": "Heybox/expression_cube_huaji.png",
            "Heybox14": "Heybox/expression_cube_jiayou.png",
            "Heybox15": "Heybox/expression_cube_jingya.png",
            "Heybox16": "Heybox/expression_cube_kaixin.png",
            "Heybox17": "Heybox/expression_cube_ku.png",
            "Heybox18": "Heybox/expression_cube_kun.png",
            "Heybox19": "Heybox/expression_cube_kuqi.png",
            "Heybox20": "Heybox/expression_cube_nu.png",
            "Heybox21": "Heybox/expression_cube_penshui.png",
            "Heybox22": "Heybox/expression_cube_qiliang.png",
            "Heybox23": "Heybox/expression_cube_shengqi.png",
            "Heybox24": "Heybox/expression_cube_shuijiao.png",
            "Heybox25": "Heybox/expression_cube_tanqi.png",
            "Heybox26": "Heybox/expression_cube_tanshou.png",
            "Heybox27": "Heybox/expression_cube_tu.png",
            "Heybox28": "Heybox/expression_cube_wa.png",
            "Heybox29": "Heybox/expression_cube_weiqu.png",
            "Heybox30": "Heybox/expression_cube_weixiao.png",
            "Heybox31": "Heybox/expression_cube_wulianku.png",
            "Heybox32": "Heybox/expression_cube_xia.png",
            "Heybox33": "Heybox/expression_cube_xiaocry.png",
            "Heybox34": "Heybox/expression_cube_xihuan.png",
            "Heybox35": "Heybox/expression_cube_xuexi.png",
            "Heybox36": "Heybox/expression_cube_yun.png",
            "Heybox37": "Heybox/expression_cube_zan.png"
        }
    })
    
</script>
</section>
    </div>
</div>


        <div class="nexmoe-post-right">
            <div class="nexmoe-fixed">
              <div class="nexmoe-tool">
                
                
                    
                        <button class="mdui-fab catalog" style="overflow:unset;">
                            <i class="nexmoefont icon-i-catalog"></i>
                            <div class="nexmoe-toc">
                              <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5"><span class="toc-number">1.</span> <span class="toc-text">基础概念</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%9A%E4%B9%89%E6%95%B0%E7%BB%84%E6%96%B9%E5%BC%8F"><span class="toc-number">2.</span> <span class="toc-text">定义数组方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%9A%E4%B9%89%E6%8C%87%E5%AE%9A%E9%95%BF%E5%BA%A6%E7%9A%84%E6%95%B0%E7%BB%84"><span class="toc-number">3.</span> <span class="toc-text">定义指定长度的数组</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E5%AF%B9%E8%B1%A1%E5%AE%9A%E4%B9%89"><span class="toc-number">4.</span> <span class="toc-text">数组对象定义</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#new-Array"><span class="toc-number">4.1.</span> <span class="toc-text">new Array</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#new-Array%E5%8F%82%E6%95%B0%E6%98%AF%E6%95%B0%E7%BB%84%E7%BB%93%E6%9E%84"><span class="toc-number">4.2.</span> <span class="toc-text">new Array参数是数组结构</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AE%BF%E9%97%AE%E6%95%B0%E7%BB%84%E5%85%83%E7%B4%A0"><span class="toc-number">5.</span> <span class="toc-text">访问数组元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%81%8D%E5%8E%86%E6%95%B0%E7%BB%84"><span class="toc-number">6.</span> <span class="toc-text">遍历数组</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%81%8D%E5%8E%86"><span class="toc-number">6.1.</span> <span class="toc-text">遍历</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%80%92%E5%BA%8F%E9%81%8D%E5%8E%86"><span class="toc-number">6.2.</span> <span class="toc-text">倒序遍历</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%80%92%E5%BA%8F%E9%81%8D%E5%8E%86-1"><span class="toc-number">6.3.</span> <span class="toc-text">倒序遍历</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E9%81%8D%E5%8E%86%E7%9A%84API"><span class="toc-number">6.4.</span> <span class="toc-text">数组遍历的API</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%9A%84%E5%A2%9E%E5%88%A0%E6%94%B9%E6%9F%A5%E6%93%8D%E4%BD%9C"><span class="toc-number">7.</span> <span class="toc-text">数组的增删改查操作</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B7%BB%E5%8A%A0%E7%9A%84%E6%93%8D%E4%BD%9C"><span class="toc-number">7.1.</span> <span class="toc-text">添加的操作</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%80%9A%E8%BF%87%E7%B4%A2%E5%BC%95%E5%80%BC%E8%BF%9B%E8%A1%8C%E6%B7%BB%E5%8A%A0"><span class="toc-number">7.2.</span> <span class="toc-text">通过索引值进行添加</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%A0%E9%99%A4"><span class="toc-number">7.3.</span> <span class="toc-text">删除</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BF%AE%E6%94%B9"><span class="toc-number">7.4.</span> <span class="toc-text">修改</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9F%A5%E8%AF%A2"><span class="toc-number">7.5.</span> <span class="toc-text">查询</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E7%B4%A2%E5%BC%95%E5%80%BC"><span class="toc-number">7.6.</span> <span class="toc-text">获取元素索引值</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%B6%E4%BB%96API"><span class="toc-number">8.</span> <span class="toc-text">其他API</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2"><span class="toc-number">8.1.</span> <span class="toc-text">字符串</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Array-from-1"><span class="toc-number">8.2.</span> <span class="toc-text">Array.from() - 1</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Array-from-2"><span class="toc-number">8.3.</span> <span class="toc-text">Array.from() - 2</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#concat"><span class="toc-number">8.4.</span> <span class="toc-text">concat()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#every"><span class="toc-number">8.5.</span> <span class="toc-text">every()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#some"><span class="toc-number">8.6.</span> <span class="toc-text">some()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#lastIndexOf"><span class="toc-number">8.7.</span> <span class="toc-text">lastIndexOf()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#filter-%E8%BF%87%E6%BB%A4%E5%87%BD%E6%95%B0"><span class="toc-number">8.8.</span> <span class="toc-text">filter() 过滤函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#map-%E6%98%A0%E5%B0%84%E5%87%BD%E6%95%B0"><span class="toc-number">8.9.</span> <span class="toc-text">map() 映射函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#join"><span class="toc-number">8.10.</span> <span class="toc-text">join()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#reverse"><span class="toc-number">8.11.</span> <span class="toc-text">reverse()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#splice-%E5%88%A0%E9%99%A4%E6%95%B0%E7%BB%84"><span class="toc-number">8.12.</span> <span class="toc-text">splice() 删除数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#slice-%E6%88%AA%E5%8F%96%E5%AD%90%E6%95%B0%E7%BB%84"><span class="toc-number">8.13.</span> <span class="toc-text">slice() 截取子数组</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%B6%E4%BB%96%E6%A1%88%E4%BE%8B"><span class="toc-number">9.</span> <span class="toc-text">其他案例</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E5%8E%BB%E9%87%8D"><span class="toc-number">9.1.</span> <span class="toc-text">数组去重</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AE%80%E5%8D%95%E7%9A%84%E6%B3%A8%E5%86%8C%E7%99%BB%E5%BD%95%E6%95%B0%E7%BB%84"><span class="toc-number">9.2.</span> <span class="toc-text">简单的注册登录数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%86%92%E6%B3%A1%E6%8E%92%E5%BA%8F"><span class="toc-number">9.3.</span> <span class="toc-text">冒泡排序</span></a></li></ol></li></ol>
                            </div>
                        </button>
                        
                  
                
                  <a href="#nexmoe-content" class="toc-link" aria-label="回到顶部" title="top"><button class="mdui-fab mdui-ripple"><i class="nexmoefont icon-caret-top"></i></button></a>
                
              </div>
            </div>
        </div>
    </div>
  </div>
  <div id="nexmoe-pendant">
    <div class="nexmoe-drawer mdui-drawer nexmoe-pd" id="drawer">
        
            <div class="nexmoe-pd-item">
                <div class="clock">
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="memory"></div>
        <div class="needle" id="hours"></div>
        <div class="needle" id="minutes"></div>
        <div class="needle" id="seconds"></div>
        <div class="clock_logo">

        </div>

    </div>
<style>
    .clock {
        background-color: #ffffff;
        width: 70vw;
        height: 70vw;
        max-width: 70vh;
        max-height: 70vh;
        border: solid 2.8vw #242424;
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        box-sizing: border-box;
        box-shadow: 0 1.4vw 2.8vw rgba(0, 0, 0, 0.8);
        zoom:0.2
    }

    .memory {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center;
    }

    .memory:nth-child(1) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(0deg) translateY(-520%);
    }

    .memory:nth-child(2) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(6deg) translateY(-1461%);
    }

    .memory:nth-child(3) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(12deg) translateY(-1461%);
    }

    .memory:nth-child(4) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(18deg) translateY(-1461%);
    }

    .memory:nth-child(5) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(24deg) translateY(-1461%);
    }

    .memory:nth-child(6) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(30deg) translateY(-520%);
    }

    .memory:nth-child(7) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(36deg) translateY(-1461%);
    }

    .memory:nth-child(8) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(42deg) translateY(-1461%);
    }

    .memory:nth-child(9) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(48deg) translateY(-1461%);
    }

    .memory:nth-child(10) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(54deg) translateY(-1461%);
    }

    .memory:nth-child(11) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(60deg) translateY(-520%);
    }

    .memory:nth-child(12) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(66deg) translateY(-1461%);
    }

    .memory:nth-child(13) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(72deg) translateY(-1461%);
    }

    .memory:nth-child(14) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(78deg) translateY(-1461%);
    }

    .memory:nth-child(15) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(84deg) translateY(-1461%);
    }

    .memory:nth-child(16) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(90deg) translateY(-520%);
    }

    .memory:nth-child(17) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(96deg) translateY(-1461%);
    }

    .memory:nth-child(18) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(102deg) translateY(-1461%);
    }

    .memory:nth-child(19) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(108deg) translateY(-1461%);
    }

    .memory:nth-child(20) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(114deg) translateY(-1461%);
    }

    .memory:nth-child(21) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(120deg) translateY(-520%);
    }

    .memory:nth-child(22) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(126deg) translateY(-1461%);
    }

    .memory:nth-child(23) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(132deg) translateY(-1461%);
    }

    .memory:nth-child(24) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(138deg) translateY(-1461%);
    }

    .memory:nth-child(25) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(144deg) translateY(-1461%);
    }

    .memory:nth-child(26) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(150deg) translateY(-520%);
    }

    .memory:nth-child(27) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(156deg) translateY(-1461%);
    }

    .memory:nth-child(28) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(162deg) translateY(-1461%);
    }

    .memory:nth-child(29) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(168deg) translateY(-1461%);
    }

    .memory:nth-child(30) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(174deg) translateY(-1461%);
    }

    .memory:nth-child(31) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(180deg) translateY(-520%);
    }

    .memory:nth-child(32) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(186deg) translateY(-1461%);
    }

    .memory:nth-child(33) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(192deg) translateY(-1461%);
    }

    .memory:nth-child(34) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(198deg) translateY(-1461%);
    }

    .memory:nth-child(35) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(204deg) translateY(-1461%);
    }

    .memory:nth-child(36) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(210deg) translateY(-520%);
    }

    .memory:nth-child(37) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(216deg) translateY(-1461%);
    }

    .memory:nth-child(38) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(222deg) translateY(-1461%);
    }

    .memory:nth-child(39) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(228deg) translateY(-1461%);
    }

    .memory:nth-child(40) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(234deg) translateY(-1461%);
    }

    .memory:nth-child(41) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(240deg) translateY(-520%);
    }

    .memory:nth-child(42) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(246deg) translateY(-1461%);
    }

    .memory:nth-child(43) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(252deg) translateY(-1461%);
    }

    .memory:nth-child(44) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(258deg) translateY(-1461%);
    }

    .memory:nth-child(45) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(264deg) translateY(-1461%);
    }

    .memory:nth-child(46) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(270deg) translateY(-520%);
    }

    .memory:nth-child(47) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(276deg) translateY(-1461%);
    }

    .memory:nth-child(48) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(282deg) translateY(-1461%);
    }

    .memory:nth-child(49) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(288deg) translateY(-1461%);
    }

    .memory:nth-child(50) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(294deg) translateY(-1461%);
    }

    .memory:nth-child(51) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(300deg) translateY(-520%);
    }

    .memory:nth-child(52) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(306deg) translateY(-1461%);
    }

    .memory:nth-child(53) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(312deg) translateY(-1461%);
    }

    .memory:nth-child(54) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(318deg) translateY(-1461%);
    }

    .memory:nth-child(55) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(324deg) translateY(-1461%);
    }

    .memory:nth-child(56) {
        background-color: #424242;
        width: 2%;
        height: 8%;
        transform: translate(-50%, -50%) rotate(330deg) translateY(-520%);
    }

    .memory:nth-child(57) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(336deg) translateY(-1461%);
    }

    .memory:nth-child(58) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(342deg) translateY(-1461%);
    }

    .memory:nth-child(59) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(348deg) translateY(-1461%);
    }

    .memory:nth-child(60) {
        background-color: #949494;
        width: 1%;
        height: 3%;
        transform: translate(-50%, -50%) rotate(354deg) translateY(-1461%);
    }

    .needle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center;
    }

    .needle#hours {
        background-color: #1f1f1f;
        width: 4%;
        height: 30%;
        transform-origin: center 75%;
        transform: translate(-50%, -75%);
    }

    .needle#hours.moving {
        transition: transform 150ms ease-out;
    }

    .needle#hours:after {
        content: '';
        background-color: #1f1f1f;
        width: 4vw;
        height: 4vw;
        max-width: 4vh;
        max-height: 4vh;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .needle#minutes {
        background-color: #1f1f1f;
        width: 2%;
        height: 45%;
        transform-origin: center 75%;
        transform: translate(-50%, -75%);
    }

    .needle#minutes.moving {
        transition: transform 150ms ease-out;
    }

    .needle#minutes:after {
        content: '';
        background-color: #1f1f1f;
        width: 4vw;
        height: 4vw;
        max-width: 4vh;
        max-height: 4vh;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .needle#seconds {
        background-color: #cb2f2f;
        width: 1%;
        height: 50%;
        transform-origin: center 75%;
        transform: translate(-50%, -75%);
    }

    .needle#seconds.moving {
        transition: transform 150ms ease-out;
    }

    .needle#seconds:after {
        content: '';
        background-color: #cb2f2f;
        width: 2.5vw;
        height: 2.5vw;
        max-width: 2.5vh;
        max-height: 2.5vh;
        display: block;
        position: absolute;
        top: 75%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }
    .clock_logo{
        width: 10vw;
        height: 10vw;
        max-width: 10vh;
        max-height: 10vh;
        position: absolute;
        top: 50%;
        left: 50%;
        box-sizing: border-box;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    @media (min-width: 100vh) {
        .clock {
            border: solid 2.8vh #242424;
            box-shadow: 0 1.4vh 2.8vh rgba(0, 0, 0, 0.8);
        }
    }

</style>





            </div>
        
            <div class="nexmoe-pd-item">
                <div class="qweather" >
    <div id="he-plugin-standard"></div>
    <div class="qweather-logo">

    </div>

</div>
<style>
    .qweather{
        position: relative;
    }
    .qweather-logo{
        position: absolute;
        right: 0;
        top: -15px;
        width: 40px;
        height: 40px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
</style>
<script>
  WIDGET = {
    "CONFIG": {
      "layout": "2",
      "width": "260",
      "height": "220",
      "background": "5",
      "dataColor": "0099FF",
      "borderRadius": "15",
      "key": "06114923535c446ea84c203a5e492a41"
    }
  }
</script>
<script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>

            </div>
        
</div>
<style>
    .nexmoe-pd {
        left: auto;
        top: 40px;
        right: 0;
    }
    .nexmoe-pd-item{
       display: flex;
        justify-content: center;
        margin-bottom: 30px;
    }
</style>

  </div>
  <script src="https://cdn.jsdelivr.net/combine/npm/lazysizes@5.1.0/lazysizes.min.js,gh/highlightjs/cdn-release@9.15.8/build/highlight.min.js,npm/mdui@0.4.3/dist/js/mdui.min.js?v=1"></script>
<script>
	hljs.initHighlightingOnLoad();
</script>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>


<script src="/js/app.js?v=1695462045739"></script>

<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/js/jquery.justifiedGallery.min.js"></script>
<script>
	$(".justified-gallery").justifiedGallery({
		rowHeight: 160,
		margins: 10,
	});
</script>

  





<!-- hexo injector body_end start -->
<script src="/js/clock.js"></script>

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

<script src="/lib/codeBlock/codeBlockFuction.js"></script>

<script src="/lib/codeBlock/codeLang.js"></script>

<script src="/lib/codeBlock/codeCopy.js"></script>

<script src="/lib/codeBlock/codeShrink.js"></script>

<link rel="stylesheet" href="/lib/codeBlock/matery.css">

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

<script src="/js/search.js"></script>

<script src="/js/webapp.js"></script>
<!-- hexo injector body_end end --><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/assets/rem.model.json"},"display":{"position":"left","width":400,"height":400},"mobile":{"show":true,"scale":0.5},"react":{"opacityDefault":0.7,"opacityOnHover":0.8},"log":false});</script></body>
</html>

<script>(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/f90b2d50.js","daovoice")</script>
<script>
  daovoice('init', {
    app_id: "f90b2d50"
  });
  daovoice('update');
</script>

